<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="wild">
  <meta name="description" content="" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>stock list</title>
  <link rel="stylesheet" type="text/css" href="/static/css/common.css">
  <link rel="stylesheet" type="text/css" href="/static/css/trade.css">
  <link rel="stylesheet" type="text/css" href="/static/js/lib/datatable/datatable.css" />
  <link rel="stylesheet" type="text/css" href="/static/js/lib/jquery-modal/jquery.modal.css" />

  <script type="text/javascript" src="/static/js/lib/jquery/3.2.1/jquery.js"></script>
  <script type="text/javascript" src="/static/js/lib/datatable/datatable.js"></script>
  <script type="text/javascript" src="/static/js/util/consts.js"></script>
  <script type="text/javascript" src="/static/js/util/config.js"></script>
  <script type="text/javascript" src="/static/js/util/common.js"></script>
  <script type="text/javascript" src="/static/js/util/frame.js"></script>
  <script type="text/javascript" src="/static/js/modules/trade.js"></script>
  <script type="text/javascript" src="/static/js/lib/jquery-modal/jquery.modal.js"></script>

  <script type="text/javascript">
    pageConfiguration.needAuth = true;
    var dataTable = new DataTable();

    function onload() {
      renderTradeMenu(1);

      var table = $('#data-table-list');
      var index = 0;
      dataTable.init({
        src: table,
        dataTable: {
          ajax: {
            url: GlobalConfig.serverUrl + '/api/trade/stockList',
            type: 'GET',
            data: {},
            headers: getRequestHeaders(),
            error: function(xhr) {
              // ExceptionHandler.handleCommonError(xhr);
              console.error(xhr);
            }
          },
          dataSrc: 'data',
          columns: [
            {
              title: '序号',
              render: function(row) {
                return ++index;
              }
            },
            {
              title: '股票名称',
              render: function(row) {
                return row.name;
              }
            },
            {
              title: '股票代码',
              render: function(row) {
                return row.stockCode;
              }
            },
            {
              title: '总/可用',
              render: function(row) {
                return row.totalVolume + '/' + row.availableVolume;
              }
            },
            {
              title: '当前价格/成本价格',
              render: function(row) {
                return row.price + '/' + row.costPrice;
              }
            },
            {
              title: '涨幅',
              render: function(row) {
                var className = row.rate >= 0 ? 'red' : 'green';
                return '<div class="'+ className + '">' + (row.rate * 100).toFixed(2) + '</div>';
              }
            },
            {
              title: '金额',
              render: function(row) {
                return (row.price * row.totalVolume).toFixed(2);
              }
            },
            {
              title: '收益',
              render: function(row) {
                var className = row.profit >= 0 ? 'red' : 'green';
                return '<div class="' + className + '">' + row.profit + '</div>';
              }
            },
            {
              title: '操作',
              render: function(row) {
                var html = '';
                var options = { stockCode: row.stockCode, price: row.price, tradeType: 'B', stockName: row.name };
                html += ' <a class="btn btn-sbumit" data-options=' + JSON.stringify(options) + '>买</a>';
                options.tradeType = 'S';
                html += ' <a class="btn btn-sbumit" data-options=' + JSON.stringify(options) + '>卖</a>';
                return html;
              }
            }
          ],
          fnDrawCallback: function(result) {
            index = 0;
            updateAccount();
          }
        },
      });

      table.on('click', '.btn-sbumit', function() {
        var data = $(this).data('options');

        setValue(data);

        $('#btn-submit-trade').removeAttr('disabled');

        $('#submit-modal').modal({
          escapeClose: true,
          clickClose: true,
          showClose: true
        });

      });

      function setValue(data) {
        $('#submit-modal input[name="stockName"]').val(data.stockName);
        $('#submit-modal input[name="amount"]').val(Math.floor(50 / data.price) * 100 + 100);
        $('#submit-modal input[name="price"]').val(data.price);
        $('#submit-modal input[name="stockCode"]').val(data.stockCode);
        $('#submit-modal input[name="tradeType"]').val(data.tradeType);
        $('#submit-modal .span-message').text('');
        if (data.tradeType === 'S') {
          $('#btn-submit-trade').text('sale');
        } else {
          $('#btn-submit-trade').text('buy');
        }
      }

      $('#btn-submit-trade').on('click', function() {
        $('#btn-submit-trade').addClass('disabled');
        $('#submit-modal .span-message').text('');

        var stockName = $('#submit-modal input[name="stockName"]').val();
        var amount = $('#submit-modal input[name="amount"]').val();
        var price = $('#submit-modal input[name="price"]').val();
        var stockCode = $('#submit-modal input[name="stockCode"]').val();
        var tradeType = $('#submit-modal input[name="tradeType"]').val();

        var url = GlobalConfig.serverUrl + '/api/trade/buy';
        if (tradeType === 'S') {
          url = GlobalConfig.serverUrl + '/api/trade/sale';
        }

        $.ajax({
          url: url,
          type: 'POST',
          data: { amount, price, stockCode, stockName },
          headers: getRequestHeaders(),
          error: function(xhr, status, errorThrown) {
            ExceptionHandler.handleCommonError(xhr);
            $('#btn-submit-trade').removeClass('disabled');
          },
          success: function(res) {
            $('#submit-modal .span-message').text(res.message || 'success');
            $('#btn-submit-trade').removeClass('disabled');
            dataTable.fnDraw();
          }
        });
      });

      var taskId = setInterval(function() {
        if (isBusinessTime()) {
          dataTable.fnDraw();
        }
      }, 10000);

      function stopTask() {
        clearInterval(taskId);
      }

      function updateAccount() {
         $.ajax({
           url: GlobalConfig.serverUrl + '/api/trade/queryAccount',
           type: 'POST',
           data: { },
           headers: getRequestHeaders(),
           error: function(xhr, status, errorThrown) {
             ExceptionHandler.handleCommonError(xhr);
           },
           success: function(res) {
             $('#totalAmount').text(res.totalAmount);
             $('#availableAmount').text(res.availableAmount);
             $('#withdrawableAmount').text(res.withdrawableAmount);
             $('#frozenAmount').text(res.frozenAmount);
          }
        });
      }

    }

  </script>

</head>

<body>
  <div id="head" class="head"></div>

  <div class="container">
    <div class="innerBox">
      <ul class="menu-nav">
      </ul>
      <div class="meta-content">
        total: <span id="totalAmount"></span>,
        available: <span id="availableAmount"></span>,
        withdrawable: <span id="withdrawableAmount"></span>,
        frozen: <span id="frozenAmount"></span>
      </div>
      <table id="data-table-list" class="data-table-list">
      </table>
      <div id="submit-modal" style="display:none;">
         <input type="text" name="stockName" readonly="true">
         <input type="number" name="amount" min="100" step="100" max="5000">
         <input type="number" name="price" min="0.9" step="0.01" max="100">
         <input type="hidden" name="stockCode" />
         <input type="hidden" name="tradeType" />
         <button id="btn-submit-trade" class="btn" data-dismiss="modal">提交</button>
         <span class="span-message" style="color: red"></span>
      </div>
    </div>
  </div>

  <div id="foot" class="foot"></div>

</body>

</html>
